<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<% String path=request.getContextPath(); String basePath=request.getScheme()+ "://" + request.getServerName() + ":" + request.getServerPort() + path+ "/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html  xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<base href="<%=basePath%>">
<title>激活卡流转</title>
	<%@ include file="/WEB-INF/jsp/common/common.jsp" %>
	<script src="js/jquery.divbox.js" type="text/javascript"></script>
	<style>
		.h_30 {
			height: 30px;
		}
		.table_body_div {
			padding: 30px 30px 15px;
		}
		.table_body_title,
		.table_body_search {
		    padding-bottom: 10px;
		}
		.table_body_title {
			font-weight: bold;
			font-size: 16px;
		}
		.table_body_search {
			border-bottom: 1px solid #ddd;
			border-top: 1px solid #ddd;
			padding: 10px 0;
			margin-top: 10px;
		}
		.fr {
			float: right;
		}
		.fl {
			float: left;
		}
		.w_50 {
			width: 50%;
		}
		.w_30 {
			width: 30%;
		}
		.w_20 {
			width: 20%;
		}
		.messageContainer {
			font-size: 10px;
			color: orange;
			padding-left: 20px;
		}
		#mnumber {
			margin-left: 15px;
		}
		.scroll {
			width: 100%;
			overflow: scroll;
			overflow-y: auto;
			overflow-x: hidden;
			display: block;
			height: 190px;
		}
		/* .scroll tr {
			display: table;
			width: 100%;
			table-layout: fixed;
		} */
		/* 清除浮动 */
		.clear::after {
			clear:both;
			content:'.';
			display:block;
			width: 0;
			height: 0;
			visibility:hidden;
		}/*==for FF/chrome/opera/IE8==*/
	</style>
	<script type="text/javascript">
	/* 初始化 start */
	$(function() {
		queryCardInfo(1)
	})
	/* 初始化 end */
	/* 查询卡接收列表   start */
	function queryCardInfo(displayPage){
		var name= $("#name").val();
		var carDefindId = $("#carDefindId").val();
		var circuType = $("#circuType").val();
		loadCardData({current:displayPage, size:10, carDefindId: carDefindId, circuType: circuType,carDefindName:name});
	}
	function loadCardData(param){
		$.openLoading();
 		$.ajax({
			url : "actirationCardCirculation/queryreceive",
			type : 'POST',
			async : true,
			dataType:'json',
			data:param,
			success : function(page) {
				$.closeLoading();
				var radioObj ="<input class='input_fxk' name='radioCard' type='radio' value=''>";
				var fieldNames = "cardDefindId@TDH,cardDefindName,circuType?{1: '上交'; 2: '下发'},comName,minNo,maxNo,number";
				var tableContent = creatTable4(fieldNames, page, radioObj);
				var tableObj = $("#cardpageTable");
				tableObj.find("tbody").remove();
				tableObj.append(tableContent);
				
				var strPage = creatChannelPage(page.current,6,page.maxPage,"75");
				var pageDIV = $("#cardpageDIV");
				pageDIV[0].innerHTML="";
				pageDIV.append(strPage);
				bindradio();//点击单选按钮，该行高亮显示
			}
		}) 
	}
	/* 查询卡接收列表   end */
	/* 单选按钮高亮 start */
    function bindradio(){
		$("input[name='radioCard']").click(function(){
			$("input[name='radioCard']").parent().parent().removeClass("table_highlighter");
			$(this).parent().parent().addClass("table_highlighter");
	   	});
    }
    /* 单选按钮高亮 end */
    /* 接收弹窗 start */
    /* 激活卡接收弹窗打开 */
    function openAreaDiv() {
    	if($(".table_highlighter").length === 0) {
    		$.message("error", "请选中一条卡定义记录！");
    		return false
    	}
    	$("#nameSpan").html($(".table_highlighter").children()[2].innerHTML)
    	$("#mcircuType").html($('.table_highlighter').children()[3].innerHTML)
    	$("#mstartNo").val($('.table_highlighter').children()[5].innerHTML)
    	$(".messageSpan").html($('.table_highlighter').children()[7].innerHTML)
    	$("#mnumber").val($('.table_highlighter').children()[7].innerHTML)
    	OpenDivInit();
    	/* getCardList(1) */
    }
    /* 激活卡接收弹窗打开 */
    /* 校验下发/上交张数 start */
	function valuedNum(number) {
		var error = {
			isError: true
		}
		if (!number) {
			error.message = "您没有填写下发张数，请正确填写！"
			return error
		}
		var value = number.replace(/\D/g,'')
		var maxVal = $('.messageSpan').html() - 0
		if (number != value){
			$('#mnumber').val(value)
			error.message = "下发张数输入格式有误！"
			return error
		}
		if (value > maxVal) {
			$('#mnumber').val(maxVal)
			error.message = "已超过最大库存张数！"
			return error
		} else if (value < 1) {
			$('#mnumber').val(1)
			error.message = "张数最少填写1张！"
			return error
		}
		error.isError = false
		return error
	}
    
	//用来存放选中状态的数据
	var pageCheckboxObj={};
    
	/* 校验下发/上交张数 end */
    /* 激活卡列表查询 start */
    function getCardList(current) {
		if(current=='-1'){
			pageCheckboxObj={};
			current='1';
		}
    	var carDefindId = $('.table_highlighter').children()[1].innerHTML
    	if (!$("#mstartNo").val()) {
    		$.message('error','请正确填写开始卡号！')
    		$("#mnumber").val('')
    		return
    	}  else {
    		startNo = $("#mstartNo").val()
    	}
		var number = $("#mnumber").val() || $(".messageSpan").html()
		var result = valuedNum(number)
		if (result.isError) {// 校验下发最大张数
			$.message("error", result.message);
		}
		number = $("#mnumber").val() || $(".messageSpan").html()
		var circuType = $("#mcircuType").html() == '上交' ? '1' : '2'
		var param = {carDefindId: carDefindId, number: number, startNo: startNo, circuType: circuType, size:500, current:current}
		
		$.openLoading();
		// 如果为第一次 则重新打开弹窗 （解决查询后高度不居中的问题）
        /* if (!$('#cardDIV').html()) {
            closeCurrentDIV('cardDiv')// 关闭弹窗
        } */
 		$.ajax({
			url : "actirationCardCirculation/queryreceiveList",
			type : 'POST',
			async : true,
			dataType:'json',
			data: param,
			success : function(page) {
				$.closeLoading();
				var str = '';
				var vCount = 0;//数据行数
				var v1Count = 0;//局部变量中条数。
				var isAllCheck = "";//是否全选 
				$.each(page.data, function (i, v) {
					//判断局部变量该页中有此卡号，则勾选
					vCount++;
					var isCheck = "";
					if(!($.isEmptyObject(pageCheckboxObj) == true || pageCheckboxObj[page.current]==undefined)){
						$.each(pageCheckboxObj[page.current],function(i1,v1){//遍历pageCheckboxObj对象。
							if(v==v1){//判断选中的值与对象中的只相等，如果相等，则选中该条数据，避免重复
								isCheck="checked='checked'";
								v1Count++;
								return false;
							}
						})	
					}
					
					str += "<tr class='t_30'><td style='width:20%;'><input type='checkbox' " + isCheck + " id='selectli' name='selectli' size='6' value='"+ v +"' ></td><td style='width:20%;'>" + (i - 0 + 1) + "</td><td style='width:60%;'>" + v + "</td></tr>"
				})
				
				if(vCount==v1Count){//如果当前页局部变量obj存了所有卡号，则全选 选中。
					isAllCheck="checked='checked'";
				}
				var tableObj = $("#CardTable").find('tbody');
				tableObj.html(str);
				var tableThead=$("#tableTitle").find('thead');
				tableThead.html('<tr class="f1"><th style="width:20%;"><input type="checkbox" name="selectAll" id="selectAll" size="6"'+ isAllCheck +' />'+"选择"+'</th><th style="width:20%;">序号</th><th style="width:80%;">卡号</th></tr>')
				$('#pageCurrent').html(page.current);
				var strPage = creatChannelPage4(page.current,6,page.maxPage,"74");
				var pageDIV = $("#activationDIV");
				pageDIV.empty();
				pageDIV.html(strPage);
				$("#cardData").css('display','inline-block')
				$("#closeDiv").css('display','inline-block')
				toggleCheck()// 全选 全不选
				// lfd added 20181112 || $("#cardDiv").css('opacity') !== '1' 解决需点击两次弹窗才打开的问题
				/* if ($("#cardDiv").css('display') === 'none' || $("#cardDiv").css('opacity') !== '1') {
					OpenDivInit()// 展开弹窗
				} */
			}
		}) 
    }
    /* 激活卡列表查询 end */
    /* 初始化弹窗 start */
    function OpenDivInit() {
    	$("#cardDiv").OpenDiv()
    	/* 张数失去焦点激活卡列表查询 start */
        /* $("#mnumber").change(function(){
        	getCardList(1) // 查询列表
    	}); */
        /* 张数失去焦点激活卡列表查询 end */
    	/* 开始卡号失去焦点激活卡列表查询 start */
        $("#mstartNo").change(function(){
        	$("#mnumber").val('')
        	querymaxnum()// 查询最大张数
    	});
        /* 开始卡号失去焦点激活卡列表查询 end */
        getCardList(1)// 进入后自动查询
    }
    /* 初始化弹窗 end */
	/* 激活卡接收最大张数 start */
	function querymaxnum() {
		// 整理数据
		var cardDefineId = $('.table_highlighter').children()[1].innerHTML
		if (!$("#mstartNo").val()) {
    		$.message('error','请正确填写开始卡号！')
    		$("#mnumber").val('')
    		return
    	}  else {
    		startNo = $("#mstartNo").val()
    	}
		var param = {cardDefineId: cardDefineId, startNo: startNo, flag: '1'}
		// $.openLoading();
 		$.ajax({
			url : "actirationCardCirculation/querymaxnum",
			type : 'POST',
			async : true,
			dataType:'text',
			data: param,
			success : function(data) {
				// $.closeLoading();
				if (data) {
					$('.messageSpan').html(data)
					// getCardList(1) // 查询列表
				} else {
					$('.messageSpan').html('0')
					$.message("error", "系统错误,请联系管理员");
				}
			}
		}) 
	}
	/* 激活卡接收最大张数 start */
	/* 激活卡接收 start */
	function cirCardData(){
		// 整理参数数据
		/* if ($("input[name='selectli']:checked").length == 0) {
			$.message("error", "请至少选择一张卡接收！");
			return 
		} */
		if($.isEmptyObject(pageCheckboxObj)){
			$.message("error", "请至少选择一张卡接收！");
			return 
		}
		
		//确认接收
		var nOList = [];
		$.each(pageCheckboxObj, function (pageNum, cardNos) {
			nOList=nOList.concat(cardNos);
			
		})
		var cardId = $('.table_highlighter').children()[1].innerHTML
		var param = {nOList: nOList, cardId: cardId}
		$.openLoading();
 		$.ajax({
			url : "actirationCardCirculation/doreceive",
			type : 'POST',
			async : true,
			dataType:'json',
			data: param,
        	traditional :true,  //注意这个参数是必须的
			success : function(data) {
				$.closeLoading();
				if("success"==data.result&&""!=data.message){
					$.message("success", data.message);
					closeCurrentDIV('cardDiv')
					queryCardInfo(1)
		    	}
				if("fail"==data.result){
		    		$.message("error", "系统错误,请联系管理员");
		    	}
				if("error"==data.result&&""!=data.message){
		    		$.message("error", data.message);
		    	}
			}
		}) 
		closeCardDiv();
		pageCheckboxObj={};
	}
	/* 激活卡接收 end */
	/* 关闭激活卡弹窗 start */
	function closeCardDiv() {
		$('#mstartNo').val('')
		$('#depNo').val('')
		$('#mnumber').val('')
		$("#CardTable").find('tbody').html("")
		$("#tableTitle").find('thead').html("")
		// $("#CardTable").find('tbody').attr("class","scroll")
		$("#activationDIV").html("")
		$("#cardData").css('display','none')
		$("#closeDiv").css('display','none')
		closeCurrentDIV('cardDiv')
	}
	/* 关闭激活卡弹窗 end */
	/* 全选、全不选 start */
	function toggleCheck() {
		// 恢复默认
		//$("input[name='selectli']").attr('checked', false)
		//$("#selectAll").attr('checked', false)
		// 添加事件
		$("input[name='selectli']").attr("onclick","checkLi(this)");
		$("#selectAll").click(function() {
			
			checkAll(); 
		})
		
	}
	
	//本页选择的个数
	function setChkBoxByPageAndCard(pageNum,cardNo){//页码数，卡号
		if($.isEmptyObject(pageCheckboxObj) == true || pageCheckboxObj[pageNum]==undefined){
			pageCheckboxObj[pageNum] = [cardNo];
		}else{
			arr1 = pageCheckboxObj[pageNum];
			index =pageCheckboxObj[pageNum].length;
			arr1[index]=cardNo;
		}
		
	}

	//清除本页不选择的
	function delChkBoxByPageAndCard(pageNum,cardNo){
		arr1 = pageCheckboxObj[pageNum];//
		$.each(arr1,function(i,v){
			console.log(v+"@,"+cardNo);
			if(v==cardNo){
				console.log(v+"@,"+cardNo);
				arr1.splice(i,1);
				return false;
			}
		})
		if(pageCheckboxObj[pageNum].length==0){
			delete pageCheckboxObj[pageNum];
		}

		
	
	} 
	// 点击多选按钮
	function checkLi(e) {
		//console.log("0:"+pageCheckboxObj[pageNum]);
		if ($("input[name='selectli']:checked").length === $("input[name='selectli']").length) {
			$("#selectAll").attr('checked', true)// 全选
			
		} else {
			$("#selectAll").attr('checked', false)// 不全选
		}
		
		var pageNum = Number($('#pageCurrent').html());//获取当前页的页码
		console.log($(e));
		var cardNo=$(e).val();//获取卡号
		if($(e).attr('checked')){//如果是选中状态
			setChkBoxByPageAndCard(pageNum,cardNo);//把当前页的页码中被选中的卡号存入到cardNo中
			console.log("add:"+pageCheckboxObj[pageNum]);
		}else{//如果没有被选中
			delChkBoxByPageAndCard(pageNum,cardNo);//删除当前页的没有被选中的卡号
			console.log("sub:"+pageCheckboxObj[pageNum]);
		}
		
	}

	function saveChecked(pageNum){
		var arr=[];
		$("input[name='selectli']:checked").each(function(i,v){
			arr[i]=$(v).val();
		})
		
		pageCheckboxObj[pageNum]=arr;

	}
		
		
	// 点击全选按钮
	function checkAll() {
		var pageNum = Number($('#pageCurrent').html());//获取当前页的页码
	
		if ($("input[name='selectli']:checked").length === $("input[name='selectli']").length) {
			$("input[name='selectli']").attr('checked', false)// 全不选
			
		} else {
			$("input[name='selectli']").attr('checked', true)// 全选
		}
		
		 if ($("#selectAll").attr('checked')){
			 if(!($.isEmptyObject(pageCheckboxObj) == true || pageCheckboxObj[pageNum]==undefined)){//当不满足“对象pageCheckboxObj是空或者key=pageNum未定义”，则返回true.
				 delete pageCheckboxObj[pageNum];			     
			 }
			saveChecked(pageNum);//翻页时，如果是全选状态，就保存当前页码和卡号
			console.log("addAll:"+pageCheckboxObj[pageNum]);
		}else{
			delete pageCheckboxObj[pageNum];//如果不是全选状态，就清除当页码。
			console.log("subAll:"+pageCheckboxObj[pageNum]);
		} 
		//1.删除进入当前页码时，对象中的数据
		//2.点击全选，当前页的所有复选框是被选中状态，将选中的数据和页码存入对象中，
		//3.当状态为全不选时，从对象中移除数据
		
		
	}
	/* 全选、全不选 start */
    /* 接收弹窗 end */
    // 统一 关闭  窗口
	function closeCurrentDIV(obj){
		$("#"+obj).CloseDiv();
	}
	</script>
</head>
<body >
	<div class="current">
		<table class="current_table_1">
			<tbody>
				<tr class="f2">
		            <td>
		              <img src="./images/current_1.jpg">
		            </td>
		            <td class="current_table_1_td">
		              <img src="images/current_1.png">&nbsp;您现在的位置：&nbsp;
		                <span style=" color:#136bab; ">激活卡管理
		                	<span style="padding:0 5px; font-weight:bold; line-height:28px;">&gt;</span>
		                	激活卡接收
		            	</span>
		            </td>
		            <td><img src="./images/current_3.jpg"></td>
	        	</tr>
			</tbody>
		</table>
	</div>			
		
	<table class="table_02" id="table">
		<tr>
			<td>
				<table class="search_table">
					<tr height="30px">
						<td width="25%" height="30">卡定义名称：
							<input name="name" id="name" type="text" class="input_text" maxlength="30" value="">
						</td>
						<td width="25%" height="30">卡定义号：
							<input name="carDefindId" id="carDefindId" type="text" class="input_text" maxlength="30" value="">
						</td>
 						<td width="25%" height="30">流转类型：
								<select class="search_select_1" id="circuType">
									<option value="">--请选择--</option>
									<option value="1">上交</option>
									<option value="2">下发</option>
								</select>
						</td>
					</tr>
					<tr height="30px">
						<td height="30"   colspan="4" style="text-align: center;">
							<input type="button" class="input_button_1" id="searchBtn" value="查询" onClick="queryCardInfo(1)" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table class="search_table">
					<tr height="30px">
						<td width="30%" height="30">
							<input type="button" class="input_button_1" id="searchBtn" value="接收" onClick="openAreaDiv()" />
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<!-- 数据列表 start -->
		<tr>
			<td>
				<table id="cardpageTable" class="content_table_1">
					<thead>
						<tr class="f1">
							<th style="width:5%;">选择</th>
							<th style="width:15%;">卡定义名称</th>
							<th style="width:5%;">类型</th>
							<th style="width:20%;">机构名称</th>
							<th style="width:10%;">最小卡号</th>
							<th style="width:10%;">最大卡号</th>
							<th style="width:5%;">卡剩余数量</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<div id="cardpageDIV" class="page"></div>
			</td>
		</tr>
		<!-- 数据列表 end -->
	</table>
	<!-- 接收弹窗 start -->
	<div id="cardDiv"  style="display:none;width:80%;">
		<div class="table_title_div">
			<table class="table_title" style='width:100%;height:20px;'>
				<tr>
				<td width="10%"></td>
				<td width="80%" id="interfaceName"></td>
				<td width="10%" align="right"><img src="./images/closedown.gif" alt="关闭"  onclick="closeCardDiv() "/></td>
				</tr>
			</table>
		</div>
		<div class="table_body_div">
			<div class="h_30 table_body_title">
				<div class="fl">卡定义名称： <span id="nameSpan"></span> </div>
				<div class="fr">类型： <span id = "mcircuType"></span></div>
			</div>
			<div class="table_body_search clear">
				<div class="fl w_30 h_30">
					<span>开始卡号：</span> 
					<input name="mstartNo" id="mstartNo" type="text" class="input_text" maxlength="30" value="">
				</div>
				<div class="fl w_50 h_30">
					<span>张数：</span> 
					<input name="mnumber" id="mnumber" class="input_text" maxlength="30" value="">
					<span class="messageContainer"><span class="messageContent">待接收总张数为：</span><span class="messageSpan"></span></span>
				</div>
				<div class="fr w_20 h_30">
					<input class="input_button_3" type="button" onclick="getCardList('-1')" value="查询">
				</div>
			</div>
			<table id="tableTitle" class="content_table_1">
				<thead>
					<!-- <tr class="f1">
						<th style="width:20%;"> 
						 <input type='checkbox' name='selectAll' id="selectAll" size='6' />
						选择
						</th>
						<th style="width:20%;">序号</th>
						<th style="width:80%;">卡号</th>
					</tr> -->
				</thead>
			</table>
			<div class="scroll">
				<table id="CardTable" class="content_table_1">
					<tbody>
					</tbody>
				</table>
			</div>
			<div id="activationDIV" class="page"></div>
		</div>
		<div align="center" >
			<input id="cardData" class="input_button_2" name="" type="button" onclick="cirCardData(1)" value="确认接收" style="display: none;">&nbsp;&nbsp;
	        <input id="closeDiv" class="input_button_3" name="" type="button" onclick="closeCardDiv() " value="取消" style="display: none;">
		</div>
	</div>
	<!-- 接收弹窗 end -->
	<div id="Loading" style="display:none" align="center">
		<img src="./images/loading.gif" />
	</div>
	<span id="pageCurrent" style="display:none"></span>
</body>
</html>